<?
error_reporting(E_ALL &~E_NOTICE);
header("Content-type: text/html; charset=utf-8");

if (@preg_match('#ru#i',$_SERVER['HTTP_ACCEPT_LANGUAGE']))
	$lang = 'ru';
elseif (@preg_match('#de#i',$_SERVER['HTTP_ACCEPT_LANGUAGE']))
	$lang = 'de';

if (isset($_REQUEST['lang']) && $_REQUEST['lang'])
	$lang = $_REQUEST['lang'];

if (!isset($lang) || !in_array($lang,array('ru','en','de')))
	$lang = 'en';

define("LANG", $lang);

if (LANG == 'ru')
{
	$msg['hello'] = "Добро пожаловать!";
	$msg['title'] = "Добро пожаловать<br/>в Bitrix in Docker!";
	$msg['desc'] = "Система оптимально сконфигурирована и готова к использованию<br/>\"1С-Битрикс: Управление сайтом\", \"1С-Битрикс: Энтерпрайз\" и \"1С-Битрикс24\".<br>";
	$msg['desc'] .= '<br>Полезные ссылки:<br><br>
<a href="https://gitlab.com/bitrix-docker/server" target="_blank">Git-репозиторий проекта</a><br><br>
<a href="https://t.me/bitrixdevops" target="_blank">Сообщество в телеграм</a><br>
';
	$msg['setup'] = "Установить";
	$msg['restore'] = "Восстановить копию";
	$msg['crm_title'] = "Бизнес работает в ";
}
elseif(LANG == 'de')
{	
	$msg['hello'] = "Willkommen!";
	$msg['title'] = "Herzlich willkommen<br/>bei der virtuellen Maschine VMBitrix!";
	$msg['desc'] = "Das System ist für die Verwendung von<br/>\"Bitrix24\" und \"Bitrix Site Manager \" optimal konfiguriert und einsatzbereit\".<br>";
    $msg['desc'] .= '<br>Nützliche Links:<br><br>
<a href="https://gitlab.com/bitrix-docker/server" target="_blank">Projekt-Git-Repository</a><br><br>
<a href="https://t.me/bitrixdevops" target="_blank">Telegram-Community</a><br>
';
    $msg['setup'] = "Installieren";
	$msg['restore'] = "Aus dem Backup wiederherstellen";
	$msg['crm_title'] = "Your company. United.";
}
else
{
	$msg['hello'] = "Welcome!";
	$msg['title'] = "Welcome to<br>Bitrix Virtual Appliance!";
	$msg['desc'] = "System is optimally configured and is ready<br/>to be used with \"Bitrix Site Manager\" and \"Bitrix24\".<br>";
    $msg['desc'] .= '<br>Useful links:<br><br>
<a href="https://gitlab.com/bitrix-docker/server" target="_blank">Project git-repository</a><br><br>
<a href="https://t.me/bitrixdevops" target="_blank">Telegram community</a><br>
';
	$msg['setup'] = "Install";
	$msg['restore'] = "Restore from the backup";
	$msg['crm_title'] = "Your company. United.";
}
$isCrm = getenv('BITRIX_ENV_TYPE') == 'crm';
?>
<html>
<head>
<title><?=$msg['hello']?></title>
</head>
<body>
	<style>
		html, body {
			padding: 0 10px;
			margin: 0;
			background: #2fc6f7;
			position: relative;
		}
		p {
			margin: 0 0 40px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size:13px;
		}
		.wrap {
			min-height: 100vh;
			position: relative;
		}

		.cloud {
			background-size: contain;
			position: absolute;
			z-index: 1;
			background-repeat: no-repeat;
			background-position: center;
			opacity: .8;
		}

		.cloud-fill {
			background-image: url();
		}

		.cloud-border {
			background-image: url();
		}

		.cloud-1 {
			top: 9%;
			left: 50%;
			width: 60px;
			height: 38px;
		}

		.cloud-2 {
			top: 14%;
			left: 12%;
			width: 80px;
			height: 51px;
		}

		.cloud-3 {
			top: 11%;
			right: 14%;
			width: 106px;
			height: 67px;
		}

		.cloud-4 {
			top: 33%;
			right: 13%;
			width: 80px;
			height: 51px;
		}

		.cloud-5 {
			bottom: 23%;
			right: 12%;
			width: 80px;
			height: 51px;
		}

		.cloud-6 {
			bottom: 23%;
			left: 12%;
			width: 80px;
			height: 51px;
		}

		.cloud-7 {
			top: 13%;
			left: 6%;
			width: 60px;
			height: 31px;
			opacity: 1;
		}

		.cloud-8 {
			top: 43%;
			right: 6%;
			width: 86px;
			height: 54px;
			opacity: 1;
		}

		.header {
			min-height: 220px;
			max-width: 727px;
			margin: 0 auto;
			box-sizing: border-box;
			position: relative;
			z-index: 10;
		}

		.logo-link,
		.buslogo-link{
			position: absolute;
			top: 50%;
			margin-top: -23px;
		}

		.logo {
			width: 255px;
			display: block;
			height: 46px;
			background-repeat: no-repeat;
			/*background-size:cover;*/
		}

		.wrap.en .logo,
		.wrap.de .logo { background-image: url(); }

		.wrap.ru .logo { background-image: url(); }

		.wrap.ua .logo { background-image: url(); }

		.buslogo {
			width: 255px;
			display: block;
			height: 46px;
			background-repeat: no-repeat;
			/*background-size:cover;*/
		}

		.wrap.en .buslogo,
		.wrap.de .buslogo { background-image: url(); }

		.wrap.ru .buslogo { background-image: url(); }

		.wrap.ua .buslogo { background-image: url(); }

		.content {
			z-index: 10;
			position: relative;
			margin-bottom: 20px;
		}

		.content-container {
			z-index: 10;
			max-width: 727px;
			margin: 0 auto;
			padding: 28px 25px 25px;
			border-radius: 11px;
			box-shadow: 0 4px 20px 0 rgba(6, 54, 70, .15);
			box-sizing: border-box;
			text-align: center;
			background-color: #fff;
			position: relative;
		}

		.content-block {
			position: relative;
			z-index: 10;
		}

		hr {
			margin: 79px 0 45px;
			border: none;
			height: 1px;
			background: #f2f2f2;
		}

		h1.content-header {
			color: #2fc6f7;
			font: 500 40px/45px "Helvetica Neue", Helvetica, Arial, sans-serif;
			margin-bottom: 13px;
			margin-top: 62px;
		}

		h2.content-header {
			color: #2fc6f7;
			font: 400 27px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
			margin-bottom: 13px;
			margin-top: 31px;
		}

		h3.content-header {
			color: #000;
			font: 400 30px/41px "Helvetica Neue", Helvetica, Arial, sans-serif;
			margin-bottom: 40px;
			margin-top: 46px;
		}

		.content-logo {
			width: 100%;
			height: 57px;
			background-repeat: no-repeat;
			background-position: center 0;
		}

		.wrap.de .content-logo,
		.wrap.en .content-logo{ background-image: url(); }

		.wrap.ru .content-logo { background-image: url(); }

		.wrap.ua .content-logo { background-image: url(); }

		.setup-btn,
		.content-table input[type="submit"],
		.content-table input[type="button"]{
			height: 45px;
			line-height: 45px;
			color: #fff;
			background-color: #b5e00f;
			padding: 0 45px;
			text-transform: uppercase;
			text-decoration: none;
			font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
			vertical-align: middle;
			border-radius: 25px;
			transition: all 250ms ease;
			display: inline-block;
			font-size: 15px;
			border: none;
			cursor: pointer;
		}

		.setup-btn:hover {
			background-color: #9bc40e;
		}

		.lnk {
			color: #2fc6f7;
			font: 15px/25px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
			border-bottom: 1px solid;
			text-decoration: none;
			transition: all 250ms ease;
		}

		.lnk:hover {
			border-bottom-color: transparent;
		}

		.progressbar-container {
			width: 70%;
			margin: 55px auto;
		}

		.progressbar-track {
			height: 19px;
			background: #edf2f5;
			border-radius: 9px;
			overflow: hidden;
			position: relative;
		}

		.progressbar-loader {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			border-radius: 9px;
			background-image: url();
			background-position: 0 0;
			background-size: auto 19px;
			-webkit-animation: progressbar 2s infinite linear;
			-moz-animation: progressbar 2s infinite linear;
			-ms-animation: progressbar 2s infinite linear;
			-o-animation: progressbar 2s infinite linear;
			animation: progressbar 2s infinite linear;
		}

		@-webkit-keyframes progressbar { 0 {background-position: 0 0;} 100% {background-position: 75px 0;} }
		@-moz-keyframes progressbar { 0 {background-position: 0 0;} 100% {background-position: 75px 0;} }
		@-ms-keyframes progressbar { 0 {background-position: 0 0;} 100% {background-position: 75px 0;} }
		@-o-keyframes progressbar { 0 {background-position: 0 0;} 100% {background-position: 75px 0;} }
		@keyframes progressbar { 0 {background-position: 0 0;} 100% {background-position: 75px 0;} }

		.progressbar-counter {
			padding-top: 10px;
			color: #000;
			font: 300 28px/29px "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: center;
		}

		.lang {
			vertical-align: middle;
			text-align: left;
			box-sizing: border-box;
			color: #333;
			font: 12px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
			display: block;
			text-decoration: none;
			padding: 5px 5px 5px 35px;
		}
		.lang:after {
			background: no-repeat center url();
			content: '';
			display: block;
			width:16px;
			height:12px;
			position: absolute;
			top: 50%;
			left: 12px;
			margin-top: -6px;
		}
		.lang.ru:after{ background-position: 0 0;}
		.lang.en:after{ background-position: 0 -13px;}
		.lang.ua:after{ background-position: 0 -26px;}
		.lang.de:after{ background-position: 0 -39px;}
		/**/
		.select-container{
			border:2px solid #d5dde0;
			height: 32px;
			position: absolute;
			right: 0;
			bottom: 0;
			width:50px;
			border-radius: 2px;
		}

		.select-container > .select-block,
		.selected-lang {
			width:100%;
			display: block;
			height: 32px;
			position: relative;
			cursor: pointer;
		}

		.selected-lang:before{
			content: '';
			border:4px solid #fff;
			border-top:4px solid #7e939b;
			display: block;
			position: absolute;
			right: 8px;
			top: 15px;
		}
		.selected-lang:after{
			left:11px;
		}

		.select-popup{
			display: none;
			position: absolute;
			top:100%;
			z-index:100;
			min-width:100%;
			border-radius:2px;
			padding:5px 0;
			background-color: #fff;
			box-shadow: 0 5px 5px rgba(0,0,0,.4);
		}
		.select-lang-item{
			height: 32px;
			width:100%;
			position: relative;
			padding:0 10px;
			box-sizing: border-box;
			transition: 220ms all ease;
		}
		.select-lang-item:hover{
			background-color: #f3f3f3;
		}
		.sub-header{
			font-size:21px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-align: left;
			margin-bottom: 10px;
		}

		.select-version-container{
			padding: 10px 20px 20px;
			text-align: left;
			font-size:16px;
			line-height:25px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		}

		.content-table {
			text-align: left;
			font-size:16px;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			width: 100%;
		}

		.input-license-container input,
		.content-table input[type="text"],
		.content-table select{
			width:100%;
			box-sizing: border-box;
			border: 2px solid #e0e6e9;
			border-radius:3px;
			font-size:15px;
			padding: 10px;
			outline: none !important;
		}
		.input-license-container{
			padding-bottom:40px;
		}
	</style>
	<div class="wrap <?=LANG?>">
		<header class="header">
			<?if ($isCrm):?>
			<a href="" target="_blank" class="logo-link"><span class="logo <?=LANG?>"></span></a>
			<?else:?>
			<a href="" target="_blank" class="buslogo-link"><span class="buslogo <?=LANG?>"></span></a>
			<?endif?>
		</header>

		<section class="content">
			<div class="content-container">
				<div class="cloud-layer">
					<div class="cloud cloud-7 cloud-fill"></div>
					<div class="cloud cloud-8 cloud-border"></div>
				</div>
				<div class="content-block">
					<?if ($isCrm):?>
						<?if (LANG == "ru"):?>
							<h1 class="content-header"><?=$msg['crm_title']?></h1>
							<div class="content-logo <?=LANG?>"></div>
						<?else:?>
							<div class="content-logo <?=LANG?>" style="margin-top:62px"></div>
							<h1 class="content-header" style="margin-top:15px"><?=$msg['crm_title']?></h1>
						<?endif?>
					<?else:?>
						<h2 class="content-header" style="color: #000;margin: 46px 0 30px;"><?=$msg['title']?></h2>
						<p><?=$msg['desc']?></p>
					<?endif?>
					<hr>
					<div style="padding-bottom: 10px;">
						<a href="bitrixsetup.php?lang=<?=LANG?>" class="setup-btn"><?=$msg['setup']?></a>
					</div>
					<div style="text-align: left;">
						<a href="restore.php?lang=<?=$lang?>" class="lnk"><?=$msg['restore']?></a>
					</div>

					<div class="select-container" onclick="document.getElementById('lang-popup').style.display = document.getElementById('lang-popup').style.display == 'block' ? 'none' : 'block'">
						<label for="ss"><span class="selected-lang lang <?=$lang?>"></span></label>
						<div class="select-popup" id="lang-popup">
							<?
							foreach(array('en','de','ru') as $l)
							{
								?>
								<div class="select-lang-item">
									<a href="?lang=<?=$l?>" class="lang <?=$l?>"><?=$l?></a>
								</div>
								<?
							}
							?>
						</div>
					</div>
				</div>
			</div>
		</section>

		<div class="cloud-layer">
			<div class="cloud cloud-1 cloud-fill"></div>
			<div class="cloud cloud-2 cloud-border"></div>
			<div class="cloud cloud-3 cloud-border"></div>
			<div class="cloud cloud-4 cloud-border"></div>
			<div class="cloud cloud-5 cloud-border"></div>
			<div class="cloud cloud-6 cloud-border"></div>
		</div>
	</div>
</body>
</html>
